<!--
 * @Author: delin66
 * @Date: 2025-01-02 15:36:09
 * @LastEditors: delin66
 * @LastEditTime: 2025-04-12 14:21:24
 * @Descripttion: 
-->
<template>
  <div class="main">
    <h1>众创空间入园条件</h1>
    <div v-html="content" class="ql-editor"></div>
<!--    <h1>众创空间入园流程</h1>-->
<!--    <div class="process">-->
<!--      <div-->
<!--        @click="changeStep(index)"-->
<!--        class="step m-l-10 m-r-10"-->
<!--        v-for="(step, index) in steps"-->
<!--        :key="index"-->
<!--      >-->
<!--        <div class="card" :class="{ active: currentStep === index }">-->
<!--          <div class="title">{{ step.title }}</div>-->
<!--          <div class="content">{{ step.content }}</div>-->
<!--        </div>-->
<!--        <div class="line" v-if="index < steps.length - 1"></div>-->
<!--      </div>-->
<!--    </div>-->
  </div>
</template>

<script setup lang="ts">
import { getParkIntroduce } from '@/api/park';
import { onMounted } from 'vue';
import { ref } from 'vue';

interface Step {
  title: string;
  content: string;
}

const content = ref('');

const steps = ref<Step[]>([
  {
    title: '签署入驻协议',
    content: '包括入驻协议和房屋租赁协议等',
  },
  {
    title: '企业注册',
    content:
      '包括企业名称预先核准申请书、公司登记（备案）申请书、指定代表或共同委托代理人授权委托书等',
  },
  {
    title: '提交装修方案备案',
    content: '包括装修保证书和装修计划书',
  },
  {
    title: '入园登记',
    content: '提交相关工商注册材料备案',
  },
  {
    title: '正式入园',
    content: '',
  },
]);

const currentStep = ref<number>(0);
function changeStep(index: number) {
  currentStep.value = index;
}
onMounted(() => {
  getParkIntroduce(7).then((res: any) => {
    if (res.code === 200) {
      content.value = res.data.content;
    }
  });
});
</script>

<style scoped lang="scss">
.main {
  width: 100%;
  padding: 20px;
  h1 {
    text-align: center;
  }
  .park-brief {
    width: 100%;
    padding: 20px;
  }
}
.process {
  width: 100%;
  flex-wrap: wrap;
  display: flex;
  justify-content: center;
  align-items: center;

  
  .step {
    display: flex;
    align-items: center;

    .card {
      margin: 20px 0;
      position: relative;
      width: 200px;
      height: 200px;
      padding: 20px;
      background-color: #fff;
      border-radius: 5px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
      transition: all 0.3s ease-in-out;

      &.active {
        background-color: #3c8dbc;
        color: #fff;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);

        .title {
          color: #fff;
        }
      }

      .title {
        font-size: 16px;
        font-weight: bold;
        margin-bottom: 10px;
      }

      .content {
        font-size: 14px;
      }
    }
    .line {
      margin-left: 10%;
      width: 60px;
      height: 40px;
      background-color: #3c8dbc;
      -webkit-clip-path: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%);
      clip-path: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%);
    }
  }
}
</style>
